﻿<!DOCTYPE html>
<html>
	<head runat="server">
		<title>JS &amp; AJAX Training</title>
		<link href="/Styles/Site.css" rel="stylesheet" type="text/css" />
		<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
	</head>

	<body>
		<form runat="server" id="frmPage">
			<section class="page">
				<ul class="nav">
					<li><a href="JS.html">JavaScript beyond basics</a></li>
					<li><a href="jquery.html">basic jQuery</a></li>
					<li><a href="Ajax.html">AJAX</a></li>
				</ul>
				<header>
					<h1>JS &amp; AJAX</h1>
				</header>
				<section class="main">
					<h2>JavaScript</h2>
					
					<h3>Hello!</h3>
					<pre>
function hello() {
	var message = "Hello, world!";
	console.log(message);
	// or document.write(message);
	// or alert(message);
}
					</pre>

					<h3>Data types</h3>
					<ul>
						<li>string</li>
						<li>object</li>
						<li>number (floating point only!)</li>
						<li>boolean</li>
						<li>function</li>
						<li>array</li>
						<li>null</li>
						<li>undefined</li>
					</ul>
					
					<h3>Conversions</h3>
					<ul>
						<li>To boolean - falsy values: "", 0, false, undefined, null, NaN, []</li>
						<li>To number: parseInt, parseFloat, + operator</li>
						<li>To string: toString()</li>
					</ul>

					<h3>Comparison operators</h3>
					<ul>
						<li><code>==</code> and <code>!=</code> convert types</li>
						<li><code>===</code> and <code>!==</code> don't convert types</li>
						<li>Strict operators are recommended</li>
					</ul>

					<h3>Objects</h3>
					<ul>
						<li>There are no classes in JS</li>
						<li>Everything is an object</li>
						<li>The most simple object: <code>{}</code></li>
						<li>Root object - window (in browsers)</li>
						<li>Objects are copies of their prototypes</li>
						<li>
							Inheritance:
							<pre>
function Base() {
	this.state = 42;
}

Base.prototype = {
	toString: function() { return "base " + this.state; }
};

Base.staticProp1 = 69;

function Child() {
	this.state = 84;
}

Child.prototype = new Base();
Child.prototype.constructor = Child;
Child.base = Base.prototype;

Child.prototype.toString = function() {
	return "child " + Child.base.toString.call(this);
};
							</pre>
						</li>
						<li>When a property is not found in the object, its prototype chain is searched</li>
						<li><code>hasOwnProperty</code> - checks if a property is defined in an object (not in its prototype chain)</li>
						<li><code>for in</code> loop - iterates through all properties of the object</li>
						<li>
							Correct usage of <code>for in</code> loop:
							<pre>
for(var i in foo) {
	if (foo.hasOwnProperty(i)) {
		console.log(i);
	}
}
							</pre>
						</li>
					</ul>

					<h3>Different flavors of <code>this</code></h3>
					<p>
						The <code>this</code> keyword behaves in a different way depending on the context it's used in.<br />
						It may reference:
					</p>
					<ul>
						<li>Function call - global object (window in browser environments)</li>
						<li>Method call - the object containing the method</li>
						<li>Constructor call - the created object</li>
						<li><code>call</code> or <code>apply</code> call - explicitly set (<code>foo.call(bar, 1, 2, 3);</code> will set <code>this</code> in <code>foo</code> to <code>bar</code>)</li>
					</ul>

					<h3>Async functions</h3>
					<ul>
						<li><code>setTimeout(function, timeout)</code> - runs a function after a specified time</li>
						<li><code>setInterval(function, interval)</code> - schedules a function to execute every <code>interval</code> milliseconds (not recommended)</li>
						<li>String-parsing versions of the above functions also exist but are not recommended</li>
					</ul>
	
					<h3>Good practices</h3>
					<ul>
						<li>Use anonymous self invoking functions</li>
						<li>Do not make mess in the root "namespace"</li>
						<li>Use <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Functions_and_function_scope/Strict_mode">strict mode</a> (but with caution)</li>
						<li>Use <a href="http://www.jslint.com/">JS Lint</a> or <a href="http://www.jshint.com/">JS Hint</a> (warning - it may hurt your feelings)</li>
						<li><strong>Eval is evil!</strong> (debugability, maintainability, speed, memory, security)</li>
						<li>
							Use K&amp;R-style braces:
							<pre>
return {
	foo: 42
}; // correct, returns an object

return
{
	foo: 42
} // incorrect, parser will insert a semicolon after return keyword (what will return undefined)
							</pre>
						</li>
					</ul>
					
					<h3>Hello again</h3>
					<pre>
(function(root, undefined){
	"use strict";
	
	// definition
	function Hello(message) {
		this.message = message;
	}

	Hello.prototype.greet = function() {
		root.console.log(this.message);
	};

	root.MyApplication = root.MyApplication || {};
	root.MyApplication.Hello = Hello;

	// usage
	var greeter = new root.MyApplication.Hello();
	greeter.message = "Hello, world!";
	greeter.greet();
}(window));
					</pre>

					<h3>Interesting stuff</h3>
					<ul>
						<li>JS parsers can insert semicolons automatically</li>
						<li>It is recommended to manually insert semicolons.</li>
						<li>JS is a <a href="http://patriciopalladino.com/files/hieroglyphy/">crazy language</a></li>
					</ul>
	
					<h3>Useful links</h3>
					<ul>
						<li><a href="http://bonsaiden.github.com/JavaScript-Garden/pl/">JS Garden</a></li>
						<li><a href="https://developer.mozilla.org/en/JavaScript/Guide">JavaScript guide on MDN</a></li>
					</ul>

					<script src="/Scripts/js.js"></script>
				</section>
			</section>
		</form>
	</body>
</html>
